<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>npm | Pro</title>
  <link rel="shortcut icon" href="../images/index.ico" type="">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../css/pro.css" />
  <link rel="stylesheet" href="../css/animate.min.css">

</head>

<body>
  <header>
    <div class="header-head">
      <a href="../index.html" class="header-head-a">
        <svg class="logo-npm" viewBox="0 0 780 250">
          <path fill="white"
            d="M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z M0,200h100V50h50v150h50V0H0V200z">
          </path>
        </svg>
        <span>
          <strong>npm</strong>
          is now a part of
          <strong>GitHub</strong>
        </span>
        <svg class="logo-cat" width="33px" height="33px" viewBox="0 0 33 33" version="1.1" role="img"
          xmlns="http://www.w3.org/2000/svg">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(-136.000000, -331.000000)">
              <path fill="white"
                d="M152.608,331.455 C143.614,331.455 136.32,338.748 136.32,347.745 C136.32,354.942 140.987,361.047 147.46,363.201 C148.275,363.351 148.572,362.848 148.572,362.416 C148.572,362.029 148.558,361.005 148.55,359.646 C144.019,360.63 143.063,357.462 143.063,357.462 C142.322,355.58 141.254,355.079 141.254,355.079 C139.775,354.069 141.366,354.089 141.366,354.089 C143.001,354.204 143.861,355.768 143.861,355.768 C145.314,358.257 147.674,357.538 148.602,357.121 C148.75,356.069 149.171,355.351 149.636,354.944 C146.019,354.533 142.216,353.135 142.216,346.893 C142.216,345.115 142.851,343.66 143.893,342.522 C143.725,342.11 143.166,340.453 144.053,338.211 C144.053,338.211 145.42,337.773 148.532,339.881 C149.831,339.519 151.225,339.339 152.61,339.332 C153.994,339.339 155.387,339.519 156.688,339.881 C159.798,337.773 161.163,338.211 161.163,338.211 C162.052,340.453 161.493,342.11 161.326,342.522 C162.37,343.66 163,345.115 163,346.893 C163,353.151 159.191,354.528 155.563,354.931 C156.147,355.434 156.668,356.428 156.668,357.947 C156.668,360.125 156.648,361.882 156.648,362.416 C156.648,362.852 156.942,363.359 157.768,363.2 C164.236,361.041 168.899,354.94 168.899,347.745 C168.899,338.748 161.605,331.455 152.608,331.455">
              </path>
            </g>
          </g>
        </svg>
      </a>
    </div>
    <div class="header-center">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
        <span class="love">❤</span>
        <span class="navbar-brand" id="wenzi" onclick="change()" οnmοuseenter="grey()" οnmοuseοut=" black()">Newtonian
          Particle Motion</span>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown1"
          aria-controls="navbarNavDropdown1" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse  justify-content-end" id="navbarNavDropdown1">
          <ul class="navbar-nav">
            <li class="nav-item dropdown" onmouseover="displayMenu()" onmouseout="hideMenu()">
              <a class="nav-link dropdown-toggle" href="./product.html" id="navbarDropdownMenuLink" role="button"
                 aria-haspopup="true" aria-expanded="false">
                Products
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" id="menu">
                <a class="dropdown-item " href="./pro.html">Pro</a>
                <a class="dropdown-item " href="# ">Teams</a>
                <a class="dropdown-item " href="# ">Enterprise</a>
              </div>
            </li>

            <li class="nav-item ">
              <a class="nav-link " href="# ">Pricing</a>
            </li>
            <li class="nav-item ">
              <a class="nav-link " href="# ">Doucumentation</a>
            </li>
            <li class="nav-item ">
              <a class="nav-link " href="# ">Community</a>
            </li>

            <li class="nav-item d-block d-lg-none ">
              <a class="nav-link " href="./register.html">Sign up</a>
            </li>
            <li class="nav-item d-block d-lg-none ">
              <a class="nav-link " href="./login.html">Sign in</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="header-bottom ">
      <div class="header-bottom-center ">
        <h1>
          <a href="../index.html">
            <svg viewBox="0 0 780 250 ">
              <path fill="#231F20 "
                d="M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z M0,200h100V50h50v150h50V0H0V200z ">
              </path>
            </svg>
          </a>
        </h1>
        <div class="nav2 row ">
          <div class="col-10 ">
            <form action=" ">
              <span class="search-logo ">
                <svg width="15px " height="15px " xmlns="http://www.w3.org/2000/svg " viewBox="0 0 18 18 "
                  aria-hidden="true ">
                  <g id="Page-1 " stroke="none " stroke-width="1 " fill="none " fill-rule="evenodd ">
                    <g id="Artboard-1 " stroke="#777777 " stroke-width="1.3 ">
                      <g id="Group ">
                        <path d="M13.4044,7.0274 C13.4044,10.5494 10.5494,13.4044 7.0274,13.4044 C3.5054,13.4044 0.6504,10.5494 0.6504,7.0274 C0.6504,3.5054 3.5054,0.6504 7.0274,0.6504 C10.5494,0.6504 13.4044,3.5054 13.4044,7.0274
                    Z " id="Stroke-3 ">
                        </path>
                        <path d="M11.4913,11.4913 L17.8683,17.8683 " id="Stroke-7 ">
                        </path>
                      </g>
                    </g>
                  </g>
                </svg>
              </span>
              <div class="search-box ">
                <input type="text " placeholder="search packages ">

              </div>
              <button class="search-text ">Search</button>


            </form>
          </div>
          <div class="sign-up col-1 d-none d-lg-block "><a href="./register.html">Sign Up</a> </div>

          <div class="sign-in col-1 d-none d-lg-block "><a href="./login.html">Sign In</a></div>
        </div>
      </div>
    </div>
  </header>




  <section>
    <img src="../images/pro3.png" alt="" class="side-img right-img animate__animated animate__fadeInRight">
    <img src="../images/pro2.png" alt="" class="side-img left-img animate__animated animate__fadeInLeft">
    <div class="section-center">
      <img src="../images/pro1.png" alt="">
      <h1>npm Pro</h1>
      <h4>Publish your own packages to the world's most popular software ecosystem</h4>
      <a href="" class="get-start">Get started</a>
      <div class="lists">
        <img src="../images/pro4.png" alt="">
        <p class="p-title">Unlimited public packages</p>
        <p class="p-content">Bring the best of open source JavaScript development to your own projects.</p>
      </div>
      <div class="lists">
        <img src="../images/pro5.png" alt="">
        <p class="p-title">Unlimited private packages</p>
        <p class="p-content">Seamlessly integrate public and private packages into your development cycle.</p>
      </div>
      <div class="lists">
        <img src="../images/pro6.png" alt="">
        <p class="p-title">Package-based permissions</p>
        <p class="p-content">Add collaborators to work on your public and private packages together.</p>
      </div>

    </div>
    </div>
  </section>
  <main>
    <div class="main-center">
      <img src="../images/pro7.png" alt="" class="bear3">
      <h2 class="bear3-h2">Working on a team?</h2>
      <p class="bear3-title">Try npm Teams.</p>
      <p class="bear3-content">Team-based access controls to manage package permissions accross your organization.</p>
      <a href="" class="bear3-a">LEARN MORE</a>
    </div>
  </main>




  <!-- section-bottom -->
  <div class="section-bottom ">
    <div class="section-bottom-center ">
      <div class="feature">
        <div class="img-back npm-bg-gradient"></div>
        <div class="bank-one">Feature Comparison</div>
        <div class="bank-two">
          <div class="bank-two-msg npm-content">Unlimited public packages &<br>
            automatic security warnings</div>
          <div>
            <div class="bank-tick">
              <div class="bank-tick-list">
                <p>Free</p>
                <img src="../images/product6.png" alt="">
              </div>
              <div class="bank-tick-list list-color">
                <p>Pro</p>
                <img src="../images/product6.png" alt="">
              </div>
              <div class="bank-tick-list list-color">
                <p>Teams</p>
                <img src="../images/product6.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="bank-two bg-grey">
          <div class="bank-two-msg npm-content">Unlimited private packages</div>
          <div class="bank-tick">
            <div class="bank-tick-list">
              <p>Free</p>
            </div>
            <div class="bank-tick-list list-color">
              <p>Pro</p>
              <img src="../images/product6.png" alt="">
            </div>
            <div class="bank-tick-list list-color">
              <p>Teams</p>
              <img src="../images/product6.png" alt="">
            </div>
          </div>
        </div>
        <div class="bank-two ">
          <div class="bank-two-msg npm-content">Unlimited team-based management</div>
          <div class="bank-tick">
            <div class="bank-tick-list">
              <p>Free</p>
            </div>
            <div class="bank-tick-list list-color">
              <p>Pro</p>
            </div>
            <div class="bank-tick-list list-color">
              <p>Teams</p>
              <img src="../images/product6.png" alt="">
            </div>
          </div>
        </div>
        <div class="img-back npm-bg-gradient"></div>

      </div>
      <div class="bank-foot">All versions include basic support</div>
    </div>
  </div>


  <div class="before-footer">
    <div class="before-footer-center">
      <div class="get-started">Get Started</div>

      <div class="box">
        <p class="route">1</p>
        <p class="box-title">Create an account</p>
        <p class="box-content">If you don't have one yet,
          <a href="">create a free npm account</a>
        </p>
      </div>
      <div class="box">
        <p class="route">2</p>
        <p class="box-title">Upgrade your account</p>
        <p class="box-content">Log into your account and
          <a href="">upgrade your plan</a>
        </p>
      </div>
    </div>
  </div>


  <footer class="row ">
    <div class="footer-img col-md-2 col-sm-6 ">
      <svg viewBox="0 0 27.23 27.23 ">
        <rect fill="#333333 " width="27.23 " height="27.23 " rx="2 "></rect>
        <polygon fill="#fff "
          points="5.8 21.75 13.66 21.75 13.67 9.98 17.59 9.98 17.58 21.76 21.51 21.76 21.52 6.06 5.82 6.04 5.8 21.75 ">
        </polygon>
      </svg>
    </div>
    <div class="col-md-3 col-sm-6 ">
      <h3>Help</h3>
      <ul>
        <li>
          <a href=" ">Documentation</a></li>
        <li>
          <a href=" ">Community</a></li>
        <li>
          <a href=" ">Case Studies</a></li>
        <li>
          <a href=" ">Status</a></li>
        <li>
          <a href=" ">Advisories</a> </li>
        <li>
          <a href=" ">Contact</a></li>
      </ul>
    </div>
    <div class="col-md-3 col-sm-6 ">
      <h3>About</h3>
      <ul>
        <li>
          <a href=" ">Company</a></li>
        <li>
          <a href=" ">Blog</a></li>
        <li>
          <a href=" ">Careers</a></li>
        <li>
          <a href=" ">Webinars</a></li>
        <li>
          <a href=" ">Press</a></li>
        <li>
          <a href=" ">Newsletter</a></li>
      </ul>
    </div>
    <div class="col-md-3 col-sm-6 ">
      <h3>Terms & Policies</h3>
      <ul>
        <li>
          <a href=" ">Policies</a>
        </li>
        <li>
          <a href=" ">Terms of Use</a></li>
        <li>
          <a href=" ">Code of Conduct</a></li>
        <li>
          <a href=" ">Privacy</a></li>

      </ul>
    </div>

  </footer>

  <script src="../js/jquery-3.5.1.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <script src="../js/pro.js"></script>


</body>



</html>